<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>


<!DOCTYPE HTML>
<html>
<head>
<title>简易富文本编辑器.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type="text/css">
#editor {
	width: 600px;
	height: 200px;
	border: 1px solid #ccc;
}

button {
	margin: 1px;
	border: 1px solid #aaa;
	background: #ffe;
	cursor: pointer;
	overflow: hidden;
}

button:hover {
	background: #ccc;
	border: 1px solid #00f;
}
</style>
</head>

<body>
	<button id="btn1"></button>
	<button id="btn2"></button>
	<button id="btn3"></button>
	<button id="btn4"></button>
	<div id="editor">Click to Editor...</div>
	<input id="printContent" type="button" value="打印编辑器内容">
	<script type="text/javascript">
		initEditor();

		//初始化
		function initEditor() {
			openOrCloseEditor("editor", "true");//开启元素编辑
			bindBtnCommand();//给样式按钮绑定命令
		}

		/**
		 * 
		 * 功能： 开启元素编辑功能
		 * 输入： el：编辑器ID; operate：Boolean值，表示启动还是关闭
		 */
		function openOrCloseEditor(el, operate) {
			var editor = document.getElementById(el);
			editor.contentEditable = operate;
		}

		//按钮绑定命令
		function bindBtnCommand() {
			var btns = document.getElementsByTagName("button"), btnConfigs = "backcolor|#f00|设置背景色 bold|null|字体加粗 indent|null|缩进 fontName|微软雅黑|转换字体"
					.split(" "), len = btnConfigs.length;
			for (var i = 0, btnConfig; btnConfig = btnConfigs[i]; i++) {
				(function(btnConfig, btn) {
					var msg = btnConfig.split("|"), lab = msg[0], value = msg[1], title = msg[2];
					btn.innerHTML = lab;
					btn.title = title;
					btn.onclick = function(e) {
						document.execCommand(lab, false, value);
					}
				})(btnConfig, btns[i]);
			}
		}

		//获取编辑器内嵌内容
		function getContent(el) {
			var editor = document.getElementById(el);
			return editor.innerHTML;
		}

		//打印按钮绑定触发事件
		document.getElementById("printContent").onclick = function(e) {
			var content = getContent("editor");
			document.write(content);
		};
	</script>
</body>
</html>